﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="/script/config.js"></script>
    <link href="/style/rightdirectory.css" rel="stylesheet" />
    <link href="/script/plugins/checked-enrich/checked-enrich.css" rel="stylesheet" />
    <script src="/script/plugins/checked-enrich/jquery.checked-enrich.js"></script>
    <style>
        table thead tr th {
            text-align: center;
        }
        table tbody tr td {
            text-align: center;
        }
        h2 {
            margin: 20px 0 0 20px;
        }
        .enrich-drop-down {
            position: relative;
        }
        #enrichGropDown {
            position: absolute;
            bottom: 0;
            left: 0;
        }
            #enrichGropDown .items {
                display: inline-block;
            }
    </style>
</head>
<body>
<div class="view-page">
  <!--搜索区域-->
  <div class="view-search inline">
   
  </div>
  <div class="view-eidt-btns">
      <a href="/views/mall/Product/productment/form.html" class="btn btn-sm">
          <i class="fa fa-plus"></i>添加
      </a>
      <a href="javascript:;" class="btn btn-sm" data-btn-eidt="/views/mall/Product/productment/form.html?v=">
          <i class="fa fa-edit"></i>编辑
      </a>
      <a id="del" href="javascript:;" class="btn btn-danger btn-sm">
          <i class="fa fa-trash-o"></i>删除
      </a>
  </div>
  <div class="view-data">
    <table id="table" class="table table-hover table-hover" data-post="">
      <thead>
          <tr>
              <th class="checkboxs">
                  <label class="checkbox-reset">
                      <input type="checkbox" data-checked-table="all" />
                  </label>
              </th>
              <th>产品品牌</th>
              <th>产品图片</th>
              <th>产品名称</th>
              <th>产品类型</th>
              <th>是否上架</th>
              <th>状态</th>
              <th>产品亮点</th>
              <th>产品介绍</th>
              <th>创建时间</th>
          </tr>
      </thead>
      <tbody></tbody>
    </table>
    <!--分页条 默认选择id=list-page元素-->
    <div id="list-page" class="view-pagination-page"></div>
  </div>
</div>
</body>
</html>

<script type="text/html" id="tem-search">
    <div class="form-inline container-fluid">
        <div class="form-group col-xs-3">
            <div class="input-group">
                <span class="input-group-addon">产品名称</span>
                <input type="text" class="form-control" data-form="ProductName" placeholder="产品名称">
            </div>
        </div>
        <div class="form-group col-xs-2">
            <div class="input-group">
                <span class="input-group-addon">产品品牌</span>
                <select class="form-control"  data-form="ProductBrand" >
                    <option value="">请选择品牌</option>
                    {{each list t}}
                    <option value="{{t.Id}}" >{{t.BrandName}}</option>
                    {{/each}}
                </select>
            </div>
        </div>
        <div class="form-group col-xs-2">
            <div class="input-group">
                <span class="input-group-addon">产品类型</span>
                <select class="form-control enrich-drop-down" data-form="ProductType">
                    <option value="">请选择类型</option>
                    {{each lir c}}
                    <option value="{{c.Id}}">{{c.TypeName}}</option>
                    {{/each}}
                </select>
            </div>
        </div>
        <div class="form-group col-xs-1"  onclick="btnsearch()">
            <button type="button" id="btn-search" class="btn btn-primary">
                <i class="fa fa-search"></i> 搜索
            </button>
        </div>
    </div>
</script>

<script type="text/html" id="tp-table">
  {{each list d}}
    <tr data-eidt="{{d.Id}}">
        <td class="checkboxs">
            <label class="checkbox-reset">
                <input type="checkbox" value="{{d.Id}}" data-checked-table="single" />
            </label>
        </td>
        <td>{{d.ProductBrand}}</td>
        <td>
            <img data-toggle="lightbox" src="{{d.ImgUrl}}" data-image="{{d.ImgUrl}}" data-caption="{{d.ProductName}}"
                 data-group="image-group-{{d.Id}}" style="width:40px;height:30px;" />
        </td>
        {{if d.ProductName.length>10}}
        <td title="{{d.ProductName}}">{{d.ProductName.substr(0,10)}}…</td> {{else if d.ProductName.length<=10}}
        <td>{{d.ProductName}}</td> {{/if}}
        <td>{{d.ProductType}}</td>
        <td>
            {{if d.PutawayState==0}}
            <label class="label">未上架</label> {{else if d.PutawayState==1}}
            <label class="label label-success">上架</label> {{else if d.PutawayState==2}}
            <label class="label label-warning">下架</label> {{/if}}
        </td>
        <td>
            {{if d.NewState==1}} 新品 {{else if d.NewState==0}}旧品{{/if}}
        </td>
        {{if d.Features.length>10}}
        <td title="{{d.Features}}">{{d.Features.substr(0,10)}}…</td> {{else if d.Features.length<=10}}
        <td>{{d.Features}}</td> {{/if}}
        {{if d.Explain.length>10}}
        <td title="{{d.Explain}}">{{d.Explain.substr(0,10)}}…</td> {{else if d.Explain.length<=10}}
        <td>{{d.Explain}}</td> {{/if}}
        <td>{{d.CreateDate|to_date}}</td>
    </tr>
  {{/each}}
</script>

<script type="text/javascript">
  $(function () {
      function searchy() {
          var parm = $(".view-search").getFormData();
          $.http.request(
              "product/parameterdata",
              parm,
              {
                  pass: function (d, status, xhr) {
                      
                      var t = d.brandList;
                      var g = d.suppliersList;
                      var c = d.typeList;
                      $(".inline").append(template("tem-search", {
                          list: t,
                          li: g,
                          lir:c
                      }));
                      $(".enrich-drop-down").enrichGropDown({ data: d.typeList, search: "TypeName" });
                  }
              }
           );
      }
      searchy();

    _LoadData();
     

    $(".form-control").focus(function () { //搜索按钮
        $(".form-control").keydown(function (e) {
           if (e.keyCode == 13) {
               _LoadData();
               searchy();
           }
        })
    });

      $("#del").on("click", function () {
          var arr = [];
          var checkbox = $("#table").getTableChecked({ type: {} });
          if (checkbox.length <= 0) {
              $.msgFall("请选择要操作的对象！"); return;
          }
          $.each(checkbox, function (i, item) {
              arr.push(parseInt(item));
          });
          $.alert("确定要删除嘛？", function () {
              $.http.json("product/del", {Ids: arr}, {
                      pass: function (data) {
                        
                          $.msgSucceed("删除成功");
                          setTimeout(function () {
                              window.location.reload();
                          }, 1000)
                      },
                      error: function (d) {
                          console.log(d);
                      }
                  })
          })
      })
    

      
  });

    function btnsearch() {
        _LoadData();
    }

    function _LoadData() {
        var parm = $(".view-search").getFormData();
        $("#table").ajaxPageTable("product/list", parm, function (d) {
            console.log(d)
            $.each(d, function (i, item) {
                var imgs = item.ImgUrl.split(';');
                item.ImgUrl = imgs[0];
            });
            $("#table>tbody").append(template("tp-table", {
                list: d
            }));
            $('img').lightbox();
        }, { pageSize:20});
    }
</script>
